<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>power_update</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<SCRIPT type=text/javascript src="<%=basePath%>js/jquery-1.7.1.min.js"></SCRIPT>
 
<script type="text/javascript" src="<%=basePath%>js/formly.min.js"></script>
<link rel="stylesheet" href="<%=basePath%>css/formly.min.css" type="text/css" />

<style type="text/css">
	html, body,div,td {  
	   margin: 0;  
	    padding: 0;  
	    font-size:12px;  
	}  
</style>
<script type="text/javascript">

$(document).ready(function() { 
	$('#MyForm').formly(); 
});

</script>
<script type="text/javascript">
/**
fromid:源list的id.
toid:目标list的id.
moveOrAppend参数("move"或者是"append"):
move -- 源list中选中的option会删除.源list中选中的option移动到目标list中,若目标list中已存在则该option不添加.
append -- 源list中选中的option不会删除.源list中选中的option添加到目标list的后面,若目标list中已存在则该option不添加.

isAll参数(true或者false):是否全部移动或添加
*/
jQuery.listTolist = function(fromid,toid,moveOrAppend,isAll) {
	if(moveOrAppend.toLowerCase() == "move") {	//移动
		if(isAll == true) {	//全部移动
			$("#"+fromid+" option").each(function() {
				//将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.
				$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
			});
			$("#"+fromid).empty();	//清空源list
		}
		else if(isAll == false) {
			$("#"+fromid+" option:selected").each(function() {
				//将源list中的option添加到目标list,当目标list中已有该option时不做任何操作.
				$(this).appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
				//目标list中已经存在的option并没有移动,仍旧在源list中,将其清空.
				if($("#"+fromid+" option[value="+$(this).val()+"]").length > 0) {
					$("#"+fromid).get(0)
					.removeChild($("#"+fromid+" option[value="+$(this).val()+"]").get(0));
				}
			});
		}
	}
	else if(moveOrAppend.toLowerCase() == "append") {
		if(isAll == true) {
			$("#"+fromid+" option").each(function() {
				$("<option></option>")
				.val($(this).val())
				.text($(this).text())
				.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
			});
		}
		else if(isAll == false) {
			$("#"+fromid+" option:selected").each(function() {
				$("<option></option>")
				.val($(this).val())
				.text($(this).text())
				.appendTo($("#"+toid+":not(:has(option[value="+$(this).val()+"]))"));
			});
		}
	}
};

function move(){
	$.listTolist('menuleft','menuright','append',false);
}
</script>

  </head>
  
  <body>
	<form method="post" action="" id="MyForm" title="操作授权><s:property value='group.groupinfo' />">
		<table width="100%">
			<tr>
				<td width="45%" rowspan="6">
					<s:select list="actionList"  id="menuleft" listKey="id" listValue="actionname" size="10" multiple="multiple" cssStyle="width:100%;height:200px;"></s:select>
				</td>
				<td width="5%">&nbsp;</td>
				<td width="45%" rowspan="6">
					<s:select list="targetList" name="menuIds" id="menuright" listKey="id" listValue="name" size="10" multiple="multiple" cssStyle="width:100%;height:200px;"></s:select>
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td><input onclick="move()" type="button" id="button" value="&gt;&nbsp;&gt;" /></td>
			</tr>
			<tr>
				<td><input type="button" id="button2" value="删除" />
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td><input type="submit" value="提交" /> 
				<input type="reset" value="重置" />
				 <input type="button" onclick="history.go(-1)" value="返回" />
				</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</form>

</body>
</html>
